<template>
	<view>
		<view v-if="loading">
			<loading></loading>
		</view>
		<view v-else class="container">
			<view class="detail-top">
				<image src="/static/images/qualified.png" mode=""></image>
				<text>合格次数</text>
				<text class="count">{{total}}次</text>
			</view>
			<view class="nav_item">
					<view  v-if="list.length > 0" >
						<view class="exam-list" v-for="(item,index) in list" :key="index"  @click="toDetail(item)">
							<text>{{item.examinationName}}</text>
							<text> {{item.createTime}}</text>
							<text>{{item.score == null?'中途退出':item.score + '分'}}</text>
							<text>详情</text>
						</view>
						<view class="load-more">
							<uni-icons v-if="loadShow" type="spinner-cycle" size="30"></uni-icons>
							<text  v-if="botShow">已经到底了</text>
						</view>
					</view>
					<view v-else >
						<isEmpty empty-text="暂无数据"></isEmpty>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
		import isEmpty from '@/components/isEmpty/isEmpty'
		import {getPassExamByStudentId} from '@/api/exam/exam'
		import {parseTime } from '@/utils/ruoyi'
		import loading from '@/components/loading/loading'
	export default {
		components: {
			isEmpty //注册子组件
		},
		data() {
			return {
				list:[],
				total:0,
				pageForm:{
					pageNo:1,
					pageSize:10,
					studentId:uni.getStorageSync('studentId')
				},
				loadShow:false,
				botShow:false,
				loading:true
			}
		},
		created() {
			this.getList();
		},
		
		onReachBottom(){
			if(!this.botShow){
				this.loadShow = true
				this.pageForm.pageNo ++ ;
				this.getList()
			}
		},
	
		methods: {
			getList(){
				getPassExamByStudentId(this.pageForm).then(res => {
					this.total = res.data.total
					if( res.data.list.length > 0){
						for (let i = 0; i <  res.data.list.length; i++) {
							 res.data.list[i].createTime = parseTime( res.data.list[i].createTime,'{y}/{m}/{d}')
						}
						this.list.push(...res.data.list)
						this.loadShow = false
					}else{
						this.loadShow = false
						this.botShow = true
					}
					this.loading = false
				}).catch(() =>{
					
				})
			},
			toDetail(e) {
				this.$tab.navigateTo('/pages/exam/detail?id=' + e.id )	
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #FFFFFF;
	}
	.container{
		width: 100%;
		background: #FFFFFF;
		min-height: 650px;
		.detail-top{
			display: flex;
			align-items: center;
			font-size: 12px;
			font-family: Inter-Light, Inter;
			color: #5E5E5E;
			padding:10px 20px;
			text{
				line-height: 24px;
				padding-left: 8px;
			}
			 image{
				width: 20px;
				height: 20px;
			}
			.count{
				color: #FF9A50 ;
				padding-right: 20px;
			}
		}
		.nav_item{
			padding: 0 15px;
			.exam-list{
				display: flex;
				background: #FFFFFF;
				border-bottom: 1px solid #F0F0F0;
				padding: 25px 0;
				align-items: center;
				flex-wrap: nowrap;
				text{
					display: inline-block;
					text-align: center;
					overflow: hidden;
				}
				text:first-child{
					width: 40%;
				}
				text:nth-child(2){
					width: 25%;
				}
				text:nth-child(3){
					width: 20%;
				}
				text:nth-child(4){
					width: 15%;
				}
			}
		}
		.load-more{
			display: block;
			padding: 20px;
			margin: 0 auto;
			text-align: center;
		}
		
	}

</style>